<template>
  <el-form ref="form" class="formWrapper" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span="24" v-if="operateType != 'view'">
        <el-form-item label="质量问题库">
          <treeselect :disable-branch-nodes="true" :normalizer="normalizer" v-model="form.libId" row-key="id" :flat="true"
            :options="dicts.libOptions" :default-expand-level="100" placeholder="质量问题库" @select="libChange" />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="24" v-if="operateType != 'split'">
        <el-form-item label="质量问题名称" prop="fileId">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" filterable clearable v-model="form.fileId"
            placeholder="请选择质量问题">
            <el-option v-for="dict in dicts.fileOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col> -->
      
      <!-- <el-col :span="12">
        <el-form-item label="拆分时间" prop="splitTime">
          <el-input disabled v-model="form.splitTime" />
        </el-form-item>
      </el-col> -->
      <el-col :span="24">
        <el-form-item label="问题描述" prop="questionDesc">
          <el-input :disabled="operateType == 'view' || form.canDel == '2'" type="textarea" :rows="3"
            v-model="form.questionDesc" :maxlength="-1" :show-word-limit="false" :autosize="{ minRows: 2, maxRows: 4 }">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="补充说明" prop="supplement">
          <el-input :disabled="operateType == 'view' || form.canDel == '2'" type="textarea" :rows="3"
            v-model="form.supplement" :maxlength="-1" :show-word-limit="false" :autosize="{ minRows: 2, maxRows: 4 }">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="防治措施" prop="controlMeasures">
          <el-input :disabled="operateType == 'view' || form.canDel == '2'" type="textarea" :rows="3"
            v-model="form.controlMeasures" :maxlength="-1" :show-word-limit="false"
            :autosize="{ minRows: 2, maxRows: 4 }">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="问题编号" prop="workNo">
          <el-input disabled v-model="form.workNo" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="责任区域" prop="dutyAreaId">
          <treeselect @input="changeDutyAreaId" :disabled="operateType == 'view' || form.canDel == '2'"
            :normalizer="normalizer1" v-model="form.dutyAreaId" :options="dicts.dutyAreaOptions"
            :default-expand-level="100" placeholder="请选择责任区域" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="检查类型" prop="checkType">
          <treeselect :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.checkType"
            :options="dicts.checkTypeOptions" :default-expand-level="100" placeholder="请选择检查类型" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="问题等级" prop="questionLevel">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.questionLevel"
            placeholder="请选择问题等级">
            <el-option v-for="dict in dicts.list_quality_level" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否返工" prop="reworkOrNot">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.reworkOrNot"
            placeholder="请选择是否返工">
            <el-option v-for="dict in dicts.list_quality_rework_or_not" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="是否公开" prop="publishOrNot">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.publishOrNot"
            placeholder="请选择是否公开">
            <el-option v-for="dict in dicts.list_quality_publish_or_not" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="整改期限" prop="rectificationDeadlineStatus">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.rectificationDeadlineStatus"
            placeholder="请选择整改期限">
            <el-option v-for="dict in dicts.list_quality_rectification_deadline_status" :key="dict.value"
              :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="问题类型" prop="questionBeyond">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.questionBeyond"
            placeholder="请选择问题类型">
            <el-option v-for="dict in dicts.list_quality_question_beyond" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="原因分析" prop="questionAnalysis">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.questionAnalysis"
            placeholder="请选择原因分析">
            <el-option v-for="dict in dicts.list_quality_question_analysis" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="质量问题分类" prop="questionId">
          <treeselect :disabled="operateType == 'view' || form.canDel == '2'" :normalizer="normalizer1"
            v-model="form.questionId" :options="dicts.libOptions" :default-expand-level="100" placeholder="请选择质量问题分类" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="整改截止时间" prop="reviseTheDates">
          <el-date-picker :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.reviseTheDates"
            type="date" placeholder="请选择整改截止时间" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数据来源" prop="dataSource">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.dataSource"
            placeholder="请选择问题分析">
            <el-option v-for="dict in dicts.list_quality_data_source" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="整改人" prop="revisePeopleId">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.revisePeopleId"
            placeholder="请选择检查人">
            <el-option v-for="dict in dicts.peopleOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="复查人" prop="reviewUserNameId">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.reviewUserNameId"
            placeholder="请选择复查人">
            <el-option v-for="dict in dicts.peopleOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="通知人" prop="notifierId">
          <el-select :disabled="operateType == 'view' || form.canDel == '2'" v-model="form.notifierId"
            placeholder="请选择通知人">
            <el-option v-for="dict in dicts.peopleOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="图片信息" prop="attachList">
          <image-upload v-model="form.attachList" :operateType="operateType" />
          <!-- <SimpleImageUpload :operateType="(operateType == 'view' || form.canDel == '2') ? 'view' : 'edit'" v-model="form.fileIds">
          </SimpleImageUpload> -->
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { getRegion } from "@/api/biz/duty/region";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
// import SimpleImageUpload from "@/components/SimpleImageUpload/index";
function required() {
  return { required: true, message: "此项不能为空", trigger: "change" }
}
export default {
  name: "SplitForm",
  components: { Treeselect },
  // components: { Treeselect, SimpleImageUpload },
  props: {
    form: {
      type: Object,
      default: () => { }
    },
    dicts: {
      type: Object,
      default: () => { }
    },
    operateType: {
      type: String,
      default: "add"
    },
  },
  data() {
    return {
      rules: {
        questionDesc: [required()],
        dutyAreaId: [required()],
        revisePeopleId: [required()],
        reviewUserNameId: [required()],
        notifierId: [required()],
        rectificationDeadlineStatus: [required()],
      },
    }
  },
  methods: {
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label || node.name || node.questionInfo,
        children: node.children || node.questionChildren,
        isDisabled: node.dataSource == null ? true : false
      };
    },
    normalizer1(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label || node.name ,
        children: node.children ,
      };
    },
    libChange(data) {
      // this.form.questionId = data.id;
      // debugger
      // if (data.questionChildren) {
        this.form.questionDesc = data.questionInfo;
        this.form.controlMeasures = data.preventiveMeasures
        this.form.questionLevel = data.questionLevel
        this.form.questionId = data.typeNo
      // }

    },
    async changeDutyAreaId(dutyAreaId) {
      this.$refs.form.validateField('dutyAreaId')
      if (!dutyAreaId) {
        this.form.revisePeopleId = ''
        this.form.reviewUserNameId = ''
        this.form.notifierId = ''
        return
      }
      const res = await getRegion(dutyAreaId)
      if (res.code == 200) {
        this.form.revisePeopleId = res.data.correctorUserId.toString();
        this.form.reviewUserNameId = res.data.reviewerUserId.toString();
        this.form.notifierId = res.data.notifierUserId.toString();
      }
    },
    validate() {
      return new Promise(resolve => {
        this.$refs.form.validate(async valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.formWrapper {
  .el-select {
    width: 100%;
  }

  .el-date-editor {
    width: 100%;
  }

  .vue-treeselect {
    height: 36px;

    &.vue-treeselect--disabled {
      cursor: not-allowed;
    }
  }

  ::v-deep .vue-treeselect--disabled .vue-treeselect__control {
    background-color: #f5f7fa;
  }

  ::v-deep .vue-treeselect--disabled .vue-treeselect__single-value {
    color: #C0C4CC !important;
  }
}
</style>